<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">Back</span>
          </a>
        </div>
        <div class="title">Pull To Refresh</div>
      </div>
    </div>
    <div class="page-content ptr-content" @ptr:refresh="loadMore">
      <div class="ptr-preloader">
        <div class="preloader"></div>
        <div class="ptr-arrow"></div>
      </div>
      <div class="list media-list">
        <ul>
          {{#each items}}
          <li class="item-content">
            <div class="item-media"><img src="{{picURL}}" width="44"/></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">{{song}}</div>
              </div>
              <div class="item-subtitle">{{author}}</div>
            </div>
          </li>
          {{/each}}
        </ul>
        <div class="block-footer">
          <p>Just pull page down to let the magic happen.<br>Note that pull-to-refresh feature is optimised for touch and native scrolling so it may not work on desktop browser.</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  return {
    data: function () {
      return {
        items: [
          {
            picURL: 'http://lorempixel.com/88/88/abstract/1',
            song: 'Yellow Submarine',
            author: 'Beatles',
          },
          {
            picURL: 'http://lorempixel.com/88/88/abstract/2',
            song: 'Don\'t Stop Me Now',
            author: 'Queen',
          },
          {
            picURL: 'http://lorempixel.com/88/88/abstract/3',
            song: 'Billie Jean',
            author: 'Michael Jackson',
          },
        ],
        songs: ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'],
        authors: ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers']
      }
    },
    methods: {
      loadMore: function (e, done) {
        var self = this;
        var $ = self.$$;

        setTimeout(function () {
          // Add new item
          self.items.push({
            picURL: 'http://lorempixel.com/88/88/abstract/' + Math.round(Math.random() * 10),
            song: self.songs[Math.floor(Math.random() * self.songs.length)],
            author: self.authors[Math.floor(Math.random() * self.authors.length)],
          })

          // Update state to rerender
          self.$setState({
            items: self.items,
          });

          // Done
          done();
        }, 1000);
      }
    }
  }
</script>
